<template>
  <div style="display: flex; flex-direction: column; flex: 1">
    <div class="ssbox">
      <!--            <i class="el-icon-sort" ></i>-->
      <el-input
        v-model="searchdata.str"
        :placeholder="searchlx == 'gtel' ? '设备序列号' : '区域名称'"
        size="medium"
        style="background: none"
      >
        <template #suffix>
          <i
            class="el-input__icon el-icon-sort searchicon"
            @click="searchlxfn()"
          ></i>
        </template>
      </el-input>
      <el-button
        size="medium"
        style="margin-left: 10px"
        type="primary"
        @click="searchfn"
      >
        搜索
      </el-button>
    </div>
    <div ref="Stationsbox" style="flex: 1; position: relative">
      <el-scrollbar
        style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0"
      >
        <div style="background: rgba(255, 255, 255, 0.1)">
          <station-boxnew
            v-show="!searchfalg"
            :active-charge-car="activeChargeCar"
            :dq-stationdatas="searchdata.Stations"
            @loadingclosefn="loadingclosefn"
            @loadingfn="loadingfn"
            @oneChargeCarfn="oneChargeCarfn"
            @setactiveChargeCarfn="setactiveChargeCarfn"
          />
          <div v-show="searchfalg">
            <div
              v-for="ChargeCaritem in searchdata.ChargeCar"
              :key="ChargeCaritem.gtel"
              class="ChargeCarbox"
              style="padding-left: 20px"
              @click="oneChargeCarfn(ChargeCaritem)"
            >
              <span
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  display: flex;
                  align-items: center;
                "
              >
                <i
                  class="iconfont iconicon-chongdianzhuang"
                  :class="'caricon' + ChargeCaritem.gzt"
                  style="font-size: 18px"
                ></i>
                {{ ChargeCaritem.mc }}({{ ChargeCaritem.gxh || 0 }})({{
                  ChargeCaritem.gtel
                }})
              </span>
            </div>
          </div>
          <!--                    <station-box @setactiveChargeCarfn="setactiveChargeCarfn" @oneChargeCarfn="oneChargeCarfn"-->
          <!--                                 :Stations="searchdata.Stations" :ChargeCar="searchdata.ChargeCar"-->
          <!--                                 :activeChargeCar="activeChargeCar" :searchfalg="searchfalg"></station-box>-->
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
  import stationBoxnew from './stationBoxnew'

  export default {
    name: 'ChargeSetCar',
    components: {
      stationBoxnew,
    },
    data() {
      return {
        searchlx: 'gtel',
        searchdata: { str: '', Stations: [] },
        Stations: [],
        ChargeCar: [],
        loading: '',
        searchfalg: false,
        activeChargeCar: new Set(),
      }
    },
    watch: {},
    mounted() {
      this.getData()
    },

    methods: {
      searchlxfn() {
        this.searchlx = this.searchlx == 'gtel' ? 'pcs' : 'gtel'
      },
      loadingfn() {
        this.loading = this.$loading({
          target: this.$refs.Stationsbox,
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255,255,255,0.1)',
        })
      },
      loadingclosefn() {
        this.loading.close()
      },
      getData() {},
      async searchfn() {
        this.activeChargeCar.clear()
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
        if (this.searchdata.str == '') {
          this.searchdata.Stations = []
          this.searchfalg = false
        } else if (this.searchlx == 'pcs') {
          this.loadingfn()
          let Stations = await this.$z.$axios.post('/StationPid', {
            pcs: this.searchdata.str,
          })
          Stations = Stations.data
          this.loadingclosefn()
          if (Stations.length == 0) {
            this.$message.warning('无搜索结果')
            return
          }
          this.searchdata.Stations = Stations
          this.searchfalg = false
        } else if (this.searchlx == 'gtel') {
          this.loadingfn()
          let ChargeCars = await this.$z.$axios.post(
            '/ChargeCarSearchDetailed',
            { gtel: this.searchdata.str }
          )
          this.loadingclosefn()
          ChargeCars = ChargeCars.data
          if (ChargeCars.length == 0) {
            this.$message.warning('无搜索结果')
            return
          }
          this.searchdata.ChargeCar = ChargeCars
          this.searchfalg = true
          if (ChargeCars.length == 1) {
            this.$emit('setChargeCar', ChargeCars)
          }
        }
      },
      Stationstfn(Station, Stations = [], callback) {
        let promise
        if (typeof callback !== 'function') {
          promise = new Promise((resolve, reject) => {
            callback = function (resolvedata, rejectdata) {
              if (resolvedata) {
                resolve(resolvedata)
              } else {
                reject(rejectdata)
              }
            }
          })
        }
        let data = this.Stations.find((f) => {
          return f.id == Station.pid
        })
        if (data) {
          Stations.push(data)
          this.Stationstfn(data, Stations, callback)
        } else {
          callback(Stations)
        }
        return promise
      },
      setactiveChargeCarfn(items) {
        if (this.activeChargeCar.has(items)) {
          this.activeChargeCar.delete(items)
        } else {
          this.activeChargeCar.add(items)
        }
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
      },
      oneChargeCarfn(item) {
        this.activeChargeCar.clear()
        this.activeChargeCar.add(item)
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ssbox {
    display: flex;
    padding-bottom: 20px;

    .searchicon {
      cursor: pointer;
    }
  }

  .ChargeCarbox {
    line-height: 36px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    align-items: center;
  }

  .ChargeCarbox:hover {
    background: rgba(255, 255, 255, 0.1);
  }
</style>
